﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    
    <form>

        <label for="FirstName">First Name</label>
        <div><input name="FirstName" class="valid8_focus textbox" /></div>

        <label for="LastName">Last Name</label>
        <div><input name="LastName" /></div>

        <label for="Username">Username</label>
        <div><input name="Username" /></div>

        <label for="Phone">Phone Number</label>
        <div><input name="Phone" /></div>

        <label for="Email">Email Address</label>
        <div><input name="Email" /></div>

        <label for="FavoriteColor">Favorite Color</label>
        <div>
            <select name="FavoriteColor">
                <option value="">Select One...</option>
                <option>Red</option>
                <option>Green</option>
                <option>Blue</option>
                <option>Other</option>
            </select>
        </div>

        <label for="Password">Password</label>
        <div><input name="Password" type="password" /></div>

        <label for="ConfirmPassword">Confirm Password</label>
        <div><input name="ConfirmPassword" type="password" /></div>

        <label for="Notes">Notes</label>
        <div><textarea rows="8" name="Notes"></textarea></div>

        <label for="AcceptTerms">Accept Terms?</label>
        <div class="checkBoxDiv"><input type="checkbox" name="AcceptTerms" value="true" /></div>

        <div class="valid8_buttons">
            <input type="button" onclick="if(valid8.isValid(this.form))alert('good')" value="Submit" />
        </div>
    </form>    
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="valid8-1.0.js"></script>
    <script type="text/javascript">
        valid8.add(valid8.stringValidator, { element: "FirstName", required: true, minLength: 3, maxLength: 100 });
        valid8.add(valid8.stringValidator, { element: "LastName", required: true, minLength: 4, maxLength: 100 });
        valid8.add(valid8.stringValidator, { element: "Username", required: true, minLength: 4, maxLength: 25 });
        valid8.add(checkUsername, { element: "Username" });
        valid8.add(valid8.stringValidator, { element: "Phone", required: true, minLength: 10, maxLength: 25, regex: valid8.phoneRegex, invalidValueError: valid8.invalidPhoneError("Phone") });
        valid8.add(valid8.stringValidator, { element: "Email", required: true, maxLength: 400, regex: valid8.emailRegex });
        valid8.add(valid8.stringValidator, { element: "Password", required: true, minLength: 8, maxLength: 25 });
        valid8.add(valid8.matchValidator, { element: "ConfirmPassword", elementToMatch: "Password", matchingFieldsError: "Your passwords do not match" });
        valid8.add(valid8.stringValidator, { element: "FavoriteColor", required: true });
        valid8.add(valid8.stringValidator, { element: "Notes", required: false, maxLength: 100 });
        valid8.add(valid8.checkboxValidator, { element: "AcceptTerms", required: true, checkBoxError: "You must accept the terms to complete signup" });

        function checkUsername(params)
        {
            //let's pretend we're thinking, and calling something remote
            valid8.showLoader(params.field);

            //fake remote call (sub this with your ajax call)
            var ajaxCall = function()
            {
                isValid = (params.field.val().toLowerCase() != "admin");
                valid8.hideLoader(params.field);
                if (isValid)
                    valid8.setValid(params.field);
                else
                    valid8.setInvalid(params.field, "Username already exists, please try another");
            };
            
            //make the fake call, delay to show processing.
            window.setTimeout(ajaxCall, 1000);
        }
    </script>
</body>
</html>